<template>
  <el-card class="box-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <span>SH102 汇总报表生成</span>
      </div>
    </template>

    <el-form :inline="true" @submit.prevent>
      <el-form-item label="LOT ID">
        <el-input
          v-model="lotid"
          placeholder="请输入 LOT ID"
          clearable
          style="width: 300px"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="loading" @click="handleGenerate">
          生成报表
        </el-button>
      </el-form-item>
    </el-form>

    <el-divider />

    <div v-if="result">
      <el-descriptions title="生成结果" :column="1" border>
        <el-descriptions-item label="LOT ID">{{ lotid }}</el-descriptions-item>
        <el-descriptions-item label="文件名">{{
          result.file
        }}</el-descriptions-item>
        <el-descriptions-item label="时间戳">{{
          result.timestamp
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag type="success">生成成功</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";

const lotid = ref("");
const loading = ref(false);
const result = ref(null);

// const uploadUrl = "https://localhost:44389/api/reportExcel/Alg";
const uploadUrl = "http://10.20.5.21:8080/api/reportExcel/Alg";

const handleGenerate = async () => {
  if (!lotid.value) {
    ElMessage.warning("请输入 LOT ID");
    return;
  }

  loading.value = true;
  result.value = null;

  try {
    const response = await axios.get(uploadUrl, {
      params: { lotid: lotid.value }
    });

    result.value = response.data;
    ElMessage.success("生成成功 🎉");
  } catch (error) {
    console.error(error);
    ElMessage.error(error.response?.data?.message || "生成失败");
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.box-card {
  max-width: 700px;
  margin: 40px auto;
}
</style>
